<script setup lang="ts">
import router from '@/router';
import { Expand, Fold } from '@element-plus/icons-vue';

const props = defineProps(['isCollapse'])
const emit = defineEmits(['toggle'])

function toggle(): void {
  emit('toggle')
}

function logout(): void {
  //移除token
  localStorage.removeItem('token')
  router.push('/login')
}

let name = localStorage.getItem('name')
let dept = localStorage.getItem('dept')

</script>

<template>
  <el-container :height="60">
    <el-main style="background-color: #545c85;padding-top: 14px;padding-bottom: 16px;">
      <el-row>
        <el-col :span="2">
          <div class="hover1">
            <el-icon v-if="props.isCollapse" :size="25">
              <Expand @click="toggle" />
            </el-icon>
            <el-icon v-if="!props.isCollapse" :size="25">
              <Fold @click="toggle" />
            </el-icon>
          </div>
        </el-col>
        <el-col :span="20">
          <div class="info">
            <span>姓名：</span>
            <span v-text="name" style="color: #fff;"></span>
            <span style="margin-left: 10px;">單位：</span>
            <span v-text="dept" style="color: #fff;"></span>
          </div>
        </el-col>
        <el-col :span="2">
          <div style="line-height: 35px;padding-left: 20px">
            <button class="Btn" @click="logout">
            <div class="sign"><svg viewBox="0 0 512 512">
                <path
                  d="M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z">
                </path>
              </svg></div>
            <div class="text">登出</div>
          </button>
          </div>
        </el-col>
      </el-row>

    </el-main>
  </el-container>
</template>

<style>
.hover,
.hover1 {
  color: #43d28a;
  transition-duration: .4s;
}

.hover:hover {
  color: #ffd04b;
  cursor: pointer;
  transition-duration: .4s;
}

.hover1:hover {
  color: #ffd04b;
  cursor: pointer;
  transition-duration: .4s;
}

.info {
  height: 27.4px;
  text-align: center;
  line-height: 27.4px;
  color: #43d28a;
  font-family: 'Courier New', Courier, monospace;
}
.Btn {
  display: flex;
  position: relative;
  justify-content: flex-start;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition-duration: .3s; 
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);
  background-color: #43d28a;
  padding: 0;
  top:0;
}

/* plus sign */
.sign {
  width: 100%;
  transition-duration: .3s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 5px;
}

.sign svg {
  width: 18px;
}

.sign svg path {
  fill: white;
}
/* text */
.text {
  position: absolute;
  right: 0%;
  width: auto;
  opacity: 0;
  color: white;
  font-size: 1.0em;
  font-weight: 400;
  transition-duration: .3s;
  padding-top: 4px;
}
/* hover effect on button width */
.Btn:hover {
  width: 100px;
  border-radius: 40px;
  transition-duration: .3s;
  background-color: #43d28a
}

.Btn:hover .sign {
  width: 30%;
  transition-duration: .3s;
  padding-left: 20px;
}
/* hover effect button's text */
.Btn:hover .text {
  opacity: 1;
  width: 70%;
  transition-duration: .3s;
}
/* button click effect*/
.Btn:active {
  transform: translate(2px ,2px);
}
</style>
